<template>
  <div class="container">
    <el-card style="margin: 10px">
      <!-- 第一行start -->
      <el-row type="flex" justify="space-between">
        <el-col :span="18">
          <el-form ref="form" :model="formData" :inline="true" size="small">
            <el-form-item label="标签名称" style="margin-left: 10px">
              <el-input
                style="width: 200px; margin-right: 50px"
                v-model="formData.tagsName"
              ></el-input>
            </el-form-item>
            <el-form-item label="状态">
              <el-select
                style="width: 200px"
                v-model="formData.status"
              >
              <el-option v-for="(item,index) in isDisabled" :key="index" :value="item" :label="item"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button @click="clearFn">清除</el-button>
              <el-button type="primary" @click="searchFn">搜索</el-button>
            </el-form-item>
          </el-form>
        </el-col>
        <el-col :span="6">
          <el-row type="flex" justify="end">
            <el-col></el-col>
            <el-col>
              <el-button
                style="float: right"
                icon="el-icon-edit"
                size="small"
                type="success"
                @click="addFn"
                >新增标签</el-button
              >
            </el-col>
          </el-row>
        </el-col>
      </el-row>
      <!-- 第一行end -->
      <!-- 提示框start -->
      <el-alert
        type="info"
        :title="`数据一共${tableData.length}条`"
        :closable="false"
        :show-icon="true"
      ></el-alert>
      <!-- 提示框end -->
      <!-- table表格start -->
      <el-table :data="tableData" style="width: 100%">
        <el-table-column
          align="center"
          type="index"
          label="序号"
        ></el-table-column>
        <el-table-column
          prop="subjectName"
          align="center"
          label="所属学科"
        ></el-table-column>
        <el-table-column
          prop="tagName"
          align="center"
          label="标签名称"
        ></el-table-column>
        <el-table-column
          prop="username"
          align="center"
          label="创建者"
        ></el-table-column>
        <el-table-column
          prop="addDate"
          align="center"
          label="创建日期"
        ></el-table-column>
        <el-table-column
          prop="state"
          align="center"
          label="状态"
        ></el-table-column>
        <el-table-column align="center" label="操作">
          <template slot-scope="{ row }">
            <el-button type="text" @click="disabledFn(row)">{{
              row.state === "已禁用" ? "启用" : "禁用"
            }}</el-button>
            <el-button
              type="text"
              :disabled="row.state === '已启用'"
              @click="changeFn(row)"
              >修改</el-button
            >
            <el-button type="text" :disabled="row.state === '已启用'" @click="delFn(row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <!-- table表格end -->
      <!-- 修改目录dialog start-->
      <el-dialog width="400px" :title="showText" :visible.sync="showDialog" @close="btnCancel">
        <el-form
          label-width="80px"
          ref="dialogForm"
          :model="dialogForm"
          :rules="diaLogrules"
        >
          <el-form-item prop="subjectName" label="所属学科">
            <el-select v-model="dialogForm.subjectName" style="width: 280px" @change="findSubjectId">
              <el-option
                v-for="(obj, index) in subjects"
                :key="index"
                :label="obj.subjectName"
                :value="obj.subjectName"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item prop="tagName" label="目录名称">
            <el-input v-model="dialogForm.tagName"></el-input>
          </el-form-item>
        </el-form>
        <el-row type="flex" justify="end" align="middle" style="margin-top:50px">
          <el-col></el-col>
          <el-col>
            <el-row style="float:right">
              <el-col>
                <el-button size="small" @click="btnCancel">取消</el-button>
                <el-button size="small" type="primary" @click="btnOk">确认</el-button>
              </el-col>
            </el-row>
          </el-col>
        </el-row>
      </el-dialog>
      <!-- 修改目录dialog end -->
    </el-card>
  </div>
</template>

<script>
// 导入获取所有标签信息的接口 list  //导入修改标签状态接口changeState //导入标签修改接口update //导入添加标签接口add
import { tagsList, changeState, update, remove, add } from '@/api/hmmm/tags'
// 获取学科列表数据list
import { list } from '@/api/hmmm/subjects'
// 导入格式化时间组件
import moment from 'moment'
export default {
  data () {
    return {
      // 定义禁用和启用的数组
      isDisabled: ['已启用', '已禁用'],
      // 定义弹出层的title
      showText: '',
      // 定义表格数据
      tableData: [],
      // 定义搜索表单数据
      formData: {
        tagsName: '',
        status: ''
      },
      // 定义弹出层是否显示
      showDialog: false,
      // 定义dialogForm表单数据
      dialogForm: {
        subjectID: 0,
        tagName: '',
        subjectName: '',
        id: 0
      },
      // 定义所有学科信息
      subjects: [],
      // 定义dialog表单的校验规则
      diaLogrules: {
        subjectName: [{ required: true, message: '所属学科不能为空', trigger: 'blur' }],
        tagName: [{ required: true, message: '目录名称不能为空', trigger: 'blur' }]
      }
    }
  },
  created () {
    // 页面加载获取所有table数据
    this.getList()
  },
  methods: {
    // 页面加载获取所有数据
    async getList () {
      const { data } = await tagsList()
      this.tableData = this.formatting(data.items)
    },
    // 将获取到的数据进行格式化
    formatting (items) {
      items.forEach(obj => {
        obj.addDate = moment(obj.addDate).format('YYYY-MM-DD HH:mm:ss')
        if (obj.state === 1) {
          obj.state = '已启用'
        } else {
          obj.state = '已禁用'
        }
      })
      return items
    },
    // 点击清除按钮触发
    clearFn () {
      this.formData = {
        tagsName: '',
        status: ''
      }
    },
    // 点击搜索按钮触发
    async searchFn () {
      await this.getList()
      this.tableData = this.tableData.filter(obj => {
        if (this.formData.tagsName === '' && this.formData.status === '') {
          return obj
        } else if (this.formData.tagsName === obj.tagName && this.formData.status === '') {
          return obj
        } else if (this.formData.tagsName === '' && this.formData.status === obj.state) {
          return obj
        } else if (this.formData.tagsName === obj.tagName && this.formData.status === obj.state) {
          return obj
        }
      })
    },
    // 点击新增标签按钮触发
    async addFn () {
      this.showText = '新增标签'
      const { data } = await list()
      this.subjects = data.items
      this.showDialog = true
    },
    // 点击禁用按钮触发
    async disabledFn (row) {
      if (row.state === '已启用') {
        row.state = 0
      } else {
        row.state = 1
      }
      await changeState(row)
      this.$message.success('操作成功')
      this.getList()
    },
    // 点击修改按钮触发
    async changeFn (row) {
      this.showText = '修改标签'
      const { data } = await list()
      this.subjects = data.items
      this.showDialog = true
      this.dialogForm.subjectName = row.subjectName
      this.dialogForm.subjectID = row.subjectID
      this.dialogForm.tagName = row.tagName
      this.dialogForm.id = row.id
    },
    // 修改目录弹出层的取消按钮点击触发
    btnCancel () {
      this.showDialog = false
      this.dialogForm = {
        subjectID: 0,
        tagName: '',
        subjectName: '',
        id: 0
      }
      this.$refs.dialogForm.clearValidate()
    },
    // 修改目录弹出层的确认按钮点击触发
    btnOk () {
      try {
        this.$refs.dialogForm.validate(async isOk => {
          if (isOk) {
            if (this.dialogForm.id) {
              await update(this.dialogForm)
              this.$message.success('修改成功')
            } else {
              await add(this.dialogForm)
              this.$message.success('添加成功')
            }
            this.showDialog = false
            this.getList()
          } else {
            this.$message.error('表单验证失败')
          }
        })
      } catch (error) {
        console.log(error)
      }
    },
    // 点击删除按钮触发
    async delFn (row) {
      await this.$confirm('此操作将永久删除该标签，是否继续？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
      await remove(row)
      this.$message.success('删除成功')
      this.getList()
    },
    // 根据subjectName寻找相对应的id
    findSubjectId (val) {
      this.$refs.dialogForm.validateField('subjectName')
      this.subjects.forEach(obj => {
        if (obj.subjectName === val) {
          this.dialogForm.subjectID = obj.id
        }
      })
      console.log(this.dialogForm.subjectID)
    }
  }
}
</script>

<style scoped lang='less'></style>
